<template>
	<view class="layout">
		<view class="status-bar" :style="{'height': getStatusBarHeight() + 'px'}"></view>
		<view class="content" :style="{ 'margin-left': getIconLeft() + 'px','height': getTitleBarHeight() + 'px' }">
			<view class="title">
				<slot name="default"></slot>
			</view>
			<view class="search-box" @click="handleGoSearch">
				<uni-icons type="search" size="20" color="#999"></uni-icons>
				<text>搜索</text>
			</view>
		</view>
	</view>
	<view class="fill" :style="{'height': getNavBarHeight() + 'px'}">

	</view>
</template>

<script setup>
	import {
		getStatusBarHeight,
		getTitleBarHeight,
		getNavBarHeight,
		getIconLeft
	} from '@/utils/system.js'
	
	const handleGoSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		padding: 0 30rpx;
		position: fixed;
		left: 0;
		z-index: 999;
		width: 100%;
		background:
			linear-gradient(to bottom, rgba(0, 0, 0, 0), #fff 400rpx),
			// linear-gradient(to bottom, transparent, #fff),
			linear-gradient(to right, rgb(195, 236, 215), rgb(244, 226, 219));

		.status-bar {
			width: 100%;
		}

		.content {
			display: flex;
			align-items: center;
		}

		.title {
			font-weight: bold;
			font-size: 40rpx;
			margin-right: 20rpx;
		}

		.search-box {
			width: 220rpx;
			padding: 0 20rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.5);
			border: 1px solid #efefef;
			height: 60rpx;

			text {
				margin-left: 10rpx;
				color: $text-font-color-3;
				font-size: 28rpx;
			}
		}
	}

	.fill {
		width: 100%;
	}
</style>